<template>
  <view :class="$style.profile">
    <profile-header></profile-header>

    <view class="flex" :class="$style.statistic" v-if="auth.isLogin">
      <view class="" :class="$style.common">

        <view>
          <view :class="$style.time">当月发生</view>
          <view :class="$style.number">
            <text :class="$style.font"> {{ statisticData[0] }} </text>
            <text>起</text>
          </view>
        </view>
        <view style="margin-left:20rpx">
          <view :class="$style.wb_title">误报</view>
          <view :class="$style.wb_num">11</view>
        </view>
      </view>

      <view class="flex-col-center" :class="$style.divider"></view>
      <view class="" :class="$style.common">
        <view>
          <view :class="$style.time">本年发生</view>
          <view :class="$style.number">
            <text :class="$style.font"> {{ statisticData[1] }} </text>
            <text>起</text>
          </view>
        </view>
        <view style="margin-left:20rpx">
          <view :class="$style.wb_title">误报</view>
          <view :class="$style.wb_num">7</view>
        </view>
      </view>
    </view>

    <!-- 月度统计数据 燃气公司和监管部门 面板 -->
    <month-statistic v-if="false && auth.isLogin"></month-statistic>

    <!-- 月度统计数据 燃气公司 人员面板 -->
    <response-speed v-if="auth.isLogin"></response-speed>

    <year-statistic v-if="auth.isLogin"></year-statistic>

  </view>
</template>

<script setup lang='ts'>
import ProfileHeader from "./header/index.vue";
import MonthStatistic from "./common/MonthStatistic.vue";
import YearStatistic from "./common/YearStatistic.vue";
import ResponseSpeed from "./common/ResponseSpeed.vue";
import { ref } from "vue";
import { useAuthStore } from "@/store";

const auth = useAuthStore();

const statisticData = ref<Array<number>>([15, 71]);
</script>

<style lang='less' module>
.profile {
  width: 100vw;
  height: 100vh;

  .statistic {
    margin: 20rpx;
    height: 186rpx;
    background: #ffffff;
    box-shadow: 0px 4px 19px 1px rgba(51, 51, 51, 0.2);
    border-radius: 20px;

    .divider {
      height: calc(100% - 60rpx);
      margin-top: 30rpx;
      border-right: 1px solid #e8e8e8;
    }

    .common {
      width: 48%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Microsoft YaHei;

      .wb_title {
        font-size: 28rpx;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FF3333;
      }

      .wb_num {
        font-size: 28rpx;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FF3333;
        width: 50rpx;
        text-align: center;
      }

      .time {
        font-size: 28rpx;
        color: #375ce4;
        font-weight: bold;
      }

      .number {
        color: #333333;
      }

      .font {
        font-size: 42rpx;
        font-weight: 400;
      }
    }
  }
}
</style>
